<template>
  <div style="padding: 16px">
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <el-col :span="17">
          <span> 公司全局概况 </span>
        </el-col>
        <el-col :span="7">
          <span style="display: flex; justify-content: space-between">
            <date
              v-model="valueTime"
              :type.sync="groupType"
              @handleChangeTime="handleChangeTime($event)"
            ></date>

            <!-- 自定义日期<el-date-picker
            key="daterange"
            v-model="rangeDate"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="{
              disabledDate: (time) =>
                !(
                  time.getTime() >= Date.now() - 365 * 8.64e7 &&
                  time.getTime() < Date.now() - 8.64e7
                ),
            }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
            @change="getList"
            size="mini"
        /> -->
          </span>
        </el-col>
      </div>
      <KoiCardI :itemData="SaleProductdata" style="margin-bottom: 10px" />
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> SKU</span>
        <span>
          <el-select
            v-model="queryParamsI.productCode"
            placeholder="请选择sku编码"
            filterable
            clearable
            allow-create
            remote
            :remote-method="getselectSkuLikeList"
          >
            <el-option
              v-for="(dict, index) in selectSkuLikeList"
              :key="index"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportI"
            >导出</el-button
          >
        </span>
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade + " " }}年度完成率</span
                    > 
                  @pagination="getselectProductLevelAnalysis"
                  -->
      </div>
      <!-- <tableDataI :tableDataList="tableDataI" /> @cell-click="tEdit"-->
      <el-table :height="400" :data="tableDataI">
        <el-table-column
          label="产品编码"
          align="center"
          prop="productCode"
          width="150"
        >
          <template v-slot="scope">
            <span
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
                font-weight: bold;
              "
              @click="getdialogApply(scope.row, 'product')"
              >{{ scope.row.productCode }}</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="店铺名称" align="center" prop="shopName" /> -->
        <el-table-column label="日期" align="center" prop="dataDateUnit" />
        <el-table-column
          label="退货数量"
          align="center"
          prop="returnQuantity"
        />
        <el-table-column label="良品数量" align="center" prop="goodQuantity" />
        <el-table-column
          label="瑕疵品数量"
          align="center"
          prop="defectiveQuantity"
        />
        <el-table-column
          label="良品瑕疵品比例"
          align="center"
          prop="goodDefectRatio"
        />
        <el-table-column
          label="分配成功数量"
          align="center"
          prop="sucessAllocatedQuantity"
        />
        <el-table-column
          label="分配成功良品数"
          align="center"
          prop="sucessGoodQuantity"
        />
        <el-table-column
          label="分配成功瑕疵品数"
          align="center"
          prop="sucessDefectiveQuantity"
        />
        <el-table-column
          label="待分配数量"
          align="center"
          prop="unallocatedQuantity"
        />
        <el-table-column
          label="待分配良品数"
          align="center"
          prop="unallocatedGoodQuantity"
        />
        <el-table-column
          label="待分配瑕疵品数"
          align="center"
          prop="unallocatedDefectiveQuantity"
        />
        <el-table-column
          label="分配失败数量"
          align="center"
          prop="failedAllocatedQuantity"
        />
        <el-table-column
          label="分配失败良品数"
          align="center"
          prop="failedGoodQuantity"
        />
        <el-table-column
          label="分配失败瑕疵品数"
          align="center"
          prop="failedDefectiveQuantity"
        />
      </el-table>
      <pagination
        v-show="totalI > 0"
        :limit.sync="queryParamsI.thisPageSize"
        :page.sync="queryParamsI.pageNum"
        :total="totalI"
        @pagination="gettableDataI"
      ></pagination>
    </el-card>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 店铺</span>
        <span>
          <!-- <el-select v-model="queryParamsIII.appDept" @change="gettableDataIII">
            <el-option
              v-for="dict in DeptList"
              :key="dict"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-radio-group
            v-model="queryParamsIII.dateType"
            size="small"
            style="margin-left: 5px"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group> -->
          <el-cascader
            clearable
            class="region"
            v-model="salesGrade"
            placeholder="选择店铺分组"
            :options="cascadeList"
            :props="{ checkStrictly: true }"
            @change="gettableDataIII"
            style="width: 300px; height: 30px"
          >
          </el-cascader>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportIII"
            >导出</el-button
          >
        </span>
      </div>

      <el-table :height="400" :data="tableDataIII">
        <el-table-column label="店铺名称" align="center" prop="shopName">
          <template v-slot="scope">
            <span
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
                font-weight: bold;
              "
              @click="getdialogApply(scope.row, 'shop')"
              >{{ scope.row.shopName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="日期" align="center" prop="dataDateUnit" />
        <el-table-column
          label="退货数量"
          align="center"
          prop="returnQuantity"
        />
        <el-table-column label="良品数量" align="center" prop="goodQuantity" />
        <el-table-column
          label="瑕疵品数量"
          align="center"
          prop="defectiveQuantity"
        />
        <el-table-column
          label="良品瑕疵品比例"
          align="center"
          prop="goodDefectRatio"
        />
        <el-table-column
          label="分配成功数量"
          align="center"
          prop="sucessAllocatedQuantity"
        />
        <el-table-column
          label="分配成功良品数"
          align="center"
          prop="sucessGoodQuantity"
        />
        <el-table-column
          label="分配成功瑕疵品数"
          align="center"
          prop="sucessDefectiveQuantity"
        />
        <el-table-column
          label="待分配数量"
          align="center"
          prop="unallocatedQuantity"
        />
        <el-table-column
          label="待分配良品数"
          align="center"
          prop="unallocatedGoodQuantity"
        />
        <el-table-column
          label="待分配瑕疵品数"
          align="center"
          prop="unallocatedDefectiveQuantity"
        />
        <el-table-column
          label="分配失败数量"
          align="center"
          prop="failedAllocatedQuantity"
        />
        <el-table-column
          label="分配失败良品数"
          align="center"
          prop="failedGoodQuantity"
        />
        <el-table-column
          label="分配失败瑕疵品数"
          align="center"
          prop="failedDefectiveQuantity"
        />
      </el-table>
      <pagination
        v-show="totalIII > 0"
        :limit.sync="queryParamsIII.thisPageSize"
        :page.sync="queryParamsIII.pageNum"
        :total="totalIII"
        @pagination="gettableDataIII"
      ></pagination>
    </el-card>

    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 个人</span>
        <span>
          <el-select v-model="queryParamsII.appDept" @change="gettableDataII">
            <el-option
              v-for="dict in DeptList"
              :key="dict"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-radio-group
            v-model="queryParamsII.dateType"
            size="small"
            style="margin-left: 5px"
          >
            <el-radio-button
              v-for="(item, index) in typeAll"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportII"
            >导出</el-button
          >
        </span>
      </div>

      <el-table :height="400" :data="tableDataII">
        <el-table-column label="申请部门" align="center" prop="appDept" />
        <el-table-column label="申请人" align="center" prop="applicantId" />
        <el-table-column label="申请人昵称" align="center" prop="nickName" />

        <el-table-column
          label="发货数量"
          align="center"
          prop="shipmentQuantity"
        />
        <el-table-column
          label="退回数量"
          align="center"
          prop="returnedQuantity"
        />
        <el-table-column
          label="待退回数量"
          align="center"
          prop="quantityToBeReturned"
        >
          
          </template></el-table-column
        >
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column label="月份" align="center" prop="monthly" />

        <el-table-column label="年" align="center" prop="appYear" />
      </el-table>
      <pagination
        v-show="totalII > 0"
        :limit.sync="queryParamsII.thisPageSize"
        :page.sync="queryParamsII.pageNum"
        :total="totalII"
        @pagination="gettableDataII"
      ></pagination>
    </el-card> -->

    <el-dialog
      :visible.sync="opendialogApply"
      width="1700px"
      append-to-body
      v-if="opendialogApply"
    >
      <dialogApply :row="row" />
    </el-dialog>
  </div>
</template>
<script>
import {
  selectDataAll,
  selectByConditionList,
} from "@/api/productAllocation/BiSalesReturnSortGoods";
import dialogApply from "./BiSalesReturnSortGoods.vue";
import date from "./common/date.vue";
import KoiCardI from "./KoiCardI";
import { selectSkuLike } from "@/api/Warehouse/BiInventoryAgeDwd";
import { listAll } from "@/api/chart/brandChannelShop";
// import {
//   selectDataAll,
//   selectDataList,
//   selectDeptList,
// } from "@/api/sample/OdsSampleTalentApplyReport";
export default {
  components: {
    KoiCardI,
    date,
    dialogApply,
  },
  data() {
    return {
      salesGrade: [],
      cascadeList: [],
      selectSkuLikeList: [],
      row: {},
      opendialogApply: false,
      //部门列表
      DeptList: [],
      typeArr: [
        { value: "month", label: "按月" },
        { value: "year", label: "按年" },
        // { value: "近1年", label: "近1年" },
      ],
      typeAll: [
        { value: "", label: "所有" },
        { value: "month", label: "按月" },
        { value: "year", label: "按年" },
      ],
      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "all",
      //时间控件
      timeObj: {},

      SaleProductdata: {},

      tableDataI: [], // 用于存储转换后的数据
      tableDataII: [], // 用于存储转换后的数据
      tableDataIII: [], // 用于存储转换后的数据

      rangeDate: [],
      queryParams: {},

      //部门
      queryParamsI: {
        groupType: "product",
        pageNum: 1,
        thisPageSize: 10,
      },

      totalI: 0,
      pageReqI: {},
      //个人
      // queryParamsII: {
      //   groupType: "applicant",
      //   dateType: "",
      //   appDept: "所有",
      //   pageNum: 1,
      //   thisPageSize: 10,
      // },
      // totalII: 0,
      // pageReqII: {
      //   pageNum: 1,
      //   thisPageSize: 10,
      // },

      //部门明细详情
      queryParamsIII: {
        groupType: "shop",
        // dateType: "month",
        // appDept: "所有",
        pageNum: 1,
        thisPageSize: 10,
      },

      totalIII: 0,
      pageReqIII: {
        pageNum: 1,
        thisPageSize: 10,
      },
    };
  },
  watch: {
    "queryParamsIII.dateType": {
      handler: function (newnew, oldold) {
        //部门明细详情
        // this.gettableDataIII();
      },
    },
    "queryParamsII.dateType": {
      handler: function (newnew, oldold) {
        //个人
        // this.gettableDataII();
      },
    },
  },
  created() {
    listAll().then((response) => {
      let result = this.transformData(response);
      // this.value = [result[0].label];
      this.cascadeList = result;
    });
  },
  methods: {
    getdialogApply(row, dept) {
      this.row = {
        pageNum: 1,
        thisPageSize: 10,
        startDate: this.timeObj.startTime,
        endDate: this.timeObj.endTime,
        dateType: this.timeObj.dateType,
        shopName: row.shopName,
        productCode: row.productCode,
      };
      // if (this.row.appDept && dept != "dept") {
      //   delete this.row.startDate;
      //   delete this.row.endDate;
      // }
      // if (dept == "product") {
      //   this.row = {
      //     productCode: row.productCode,
      //     ...this.queryParamsI,
      //   };
      // } else if (dept == "shop") {
      //   this.row = {
      //     shopName: row.shopName,
      //     ...this.queryParamsIII,
      //   };
      // }

      this.opendialogApply = true;
    },
    //部门
    tEdit(row) {
      this.queryParamsIII = {
        ...this.queryParamsIII,
        appDept: row.appDept,
      };

      //部门明细详情
      this.gettableDataIII();

      this.queryParamsII = {
        ...this.queryParamsII,
        appDept: row.appDept,
      };

      //个人
      this.gettableDataII();
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // if (!timeObj.endTime) {
      //   return;
      // }
      this.timeObj = timeObj;
      if (timeObj.dateType == "daterange") {
        this.timeObj.dateType = "date";
      }

      this.queryParamsI.startDate = this.timeObj.startTime;
      this.queryParamsI.endDate = this.timeObj.endTime;
      this.queryParamsIII.startDate = this.timeObj.startTime;
      this.queryParamsIII.endDate = this.timeObj.endTime;
      this.getList();
    },

    getList() {
      // if (this.rangeDate.length > 0) {
      this.queryParams = {
        startDate: this.timeObj.startTime,
        endDate: this.timeObj.endTime,
      };

      // this.queryParamsI = {
      //   startDate: this.timeObj.startTime,
      //   endDate: this.timeObj.endTime,
      //   ...this.queryParamsI,
      // };

      // }
      selectDataAll(this.queryParams).then((response) => {
        this.SaleProductdata = response ? response : {};
      });

      //部门
      this.gettableDataI();

      //部门明细详情
      this.gettableDataIII();
      return;
      //个人
      this.gettableDataII();
    },
    //部门
    gettableDataI() {
      this.queryParamsI.dateType = this.timeObj.dateType;

      selectByConditionList(this.queryParamsI).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};
        this.tableDataI = response.rows;
        this.totalI = response.total;
      });
    },
    //部门明细详情
    gettableDataIII() {
      if (this.salesGrade) {
        this.queryParamsIII.shopName = this.salesGrade.slice(-1)[0];
      }
      this.queryParamsIII.dateType = this.timeObj.dateType;
      selectByConditionList(this.queryParamsIII).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};
        this.tableDataIII = response.rows;
        this.totalIII = response.total;
      });
    },
    //个人
    gettableDataII() {
      selectDataList(this.queryParamsII).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};unshift
        this.tableDataII = response.data;
        this.totalII = response.totalCount;
      });
    },
    getselectSkuLikeList(key) {
      selectSkuLike({ value: key }).then((response) => {
        response.unshift("所有");
        this.selectSkuLikeList = response;
      });
    },

    handleExportI() {
      this.download(
        "product/OdsSampleTalentApplyReport/selectDataListExport",
        {
          ...this.queryParamsI,
        },
        `dept_${new Date().getTime()}.xlsx`
      );
    },
    handleExportII() {
      this.download(
        "product/OdsSampleTalentApplyReport/selectDataListExport",
        {
          ...this.queryParamsII,
        },
        `applicant_${new Date().getTime()}.xlsx`
      );
    },
    handleExportIII() {
      this.download(
        "product/OdsSampleTalentApplyReport/selectDataListExport",
        {
          ...this.queryParamsIII,
        },
        `dept_${new Date().getTime()}.xlsx`
      );
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
            disabled: true,
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
            disabled: true,
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
  },
};
</script>
/** 产品编码 */
@Excel(name = "产品编码")
private String productCode;

/** 店铺名称 */
@Excel(name = "店铺名称")
private String shopName;

/** 日期 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date dataDateUnit;

/** 退货数量 */
@Excel(name = "退货数量")
private Integer returnQuantity;

//上架数量
private Integer putawayQuantity;

/** 良品数量 */
@Excel(name = "良品数量")
private Integer goodQuantity;

/** 瑕疵品数量 */
@Excel(name = "瑕疵品数量")
private Integer defectiveQuantity;

/** 良品瑕疵品比例 */
@Excel(name = "良品瑕疵品比例")
private Double goodDefectRatio;

/** 分配成功数量 */
@Excel(name = "分配成功数量")
private Integer sucessAllocatedQuantity;

/** 分配成功良品数 */
@Excel(name = "分配成功良品数")
private Integer sucessGoodQuantity;

/** 分配成功瑕疵品数 */
@Excel(name = "分配成功瑕疵品数")
private Integer sucessDefectiveQuantity;

/** 待分配数量 */
@Excel(name = "待分配数量")
private Integer unallocatedQuantity;

/** 待分配良品数 */
@Excel(name = "待分配良品数")
private Integer unallocatedGoodQuantity;

/** 待分配瑕疵品数 */
@Excel(name = "待分配瑕疵品数")
private Integer unallocatedDefectiveQuantity;

/** 分配失败数量 */
@Excel(name = "分配失败数量")
private Integer failedAllocatedQuantity;

/** 分配失败良品数 */
@Excel(name = "分配失败良品数")
private Integer failedGoodQuantity;

/** 分配失败瑕疵品数 */
@Excel(name = "分配失败瑕疵品数")
private Integer failedDefectiveQuantity;